<template>
  <div class="like-home-container container" @click="hiddenModal">
    <div class="left">
      <div class="banner">

      </div>
      <div class="user-data">
        <div class="info">
          <div class="avatar">
            <img src="@/assets/images/wallet/avatar.png" alt=""/>
          </div>
          <div class="user">
            <div>
              <span class="name">姓名</span>
              <span class="label"><i class="iconfont icon-user fz-16" style="vertical-align: -1px;"/>店长</span>
              <span class="status status-1">在岗</span>
            </div>
            <div class="desc color-gray">
              <span>工号 123456</span>
              <span class="shop">门店 测试门店</span>
            </div>
          </div>
        </div>
        <div class="data">
          <div class="item">
            <div class="number">45464</div>
            <div class="label color-gray"><i class="iconfont icon-like"/>人气值</div>
          </div>
          <div class="item">
            <div class="number">45464</div>
            <div class="label color-gray"><i class="iconfont icon-ranking"/>排名</div>
          </div>
        </div>
      </div>
      <div class="gifts card">
        <div class="head flex row-between">
          <span class="fz-16 bold">打赏礼物</span>
          <router-link to="">打赏规则<i class="iconfont icon-arrow"/></router-link>
        </div>
        <div class="list">
          <div :class="['item active']" :ref="`gift${i}`" v-for="i in 7" @click.stop="getGiftInfo(i)">

          </div>
          <div class="item-more" @click.stop="showMoreGift">
            <div class="more">更多</div>
            <div class="more-modal modal" v-show="moreShow">
              <div class="modal-body">
                <div :class="['more-item active']" :ref="`mgift${i}`" v-for="i in 20" @click.stop="getMoreGiftInfo(i)">

                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="gifts-wall card">
        <div class="head flex row-between">
          <span class="fz-16 bold">礼物墙</span>
          <router-link to="">人气值规则<i class="iconfont icon-arrow"/></router-link>
        </div>
        <div class="wall-body">
          <div class="list">
            <div class="item" v-for="i in 10">

            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="right">
      <div class="tabs">
        <div class="item active">周榜</div>
        <div class="item">月榜</div>
        <div class="item">总榜</div>
      </div>
      <div class="lists-body">
        <user-ranking/>
      </div>
    </div>
    <div class="gift-send-modal modal" ref="giftSendModal" :style="sendModel.position">
      <div class="gift-con">
        <div class="img mr-10 wh-64"></div>
        <div class="gift-info flex-1">
          <div class="">
            <span class="fz-16 bold">名称名称</span>
            <span class="color-brown"> (上机时长12分钟可获得)</span>
          </div>
          <div class="color-gray fz-12">描述描述描述描述</div>
          <div class="values flex row-between fz-12">
            <span>人气值 <span class="number">100</span></span>
            <span>持有量 <span class="number">100</span></span>
          </div>
        </div>
      </div>
      <div class="footer">
        <div class="item active" v-for="i in 4">10</div>
        <Button type="primary">赠送</Button>
      </div>
    </div>
  </div>
</template>
<script>
import userRanking from "./components/userRanking.vue";
export default {
  name: "home",
  components: {
    userRanking
  },
  data() {
    return {
      moreShow: false,
      sendModel: {
        active: -1,
        position: {
          top: '-1000px',
          left: '-1000px'
        }
      }
    }
  },
  computed: {},
  methods: {
    getGiftInfo(index) {
      this.moreShow = false
      let rect = this.$refs[`gift${index}`][0].getBoundingClientRect();
      let { top, left,} = rect
      left = left - (48 / 2) + 2
      this.moveGiftSendModal(left, top, index)
    },
    getMoreGiftInfo(index) {
      let rect = this.$refs[`mgift${index}`][0].getBoundingClientRect();
      let { top, left,} = rect
      left = left - 40
      this.moveGiftSendModal(left, top, index)
    },
    showMoreGift() {
      this.moreShow = !this.moreShow
      this.hiddenGiftSendModal()
    },
    moveGiftSendModal(left, top, active = -1, moreActive = -1) {
      const giftSendModalRect = this.$refs.giftSendModal.getBoundingClientRect()
      let position = {
        transition: 'none',
        top: `${top - giftSendModalRect.height - 12}px`,
        left: `${left}px`
      }
      if (this.sendModel.active != -1) {
        position['transition'] = 'left .1s'
      }
      this.sendModel = {
        active,
        moreActive,
        position: position
      }
    },
    hiddenModal() {
      this.moreShow = false
      this.hiddenGiftSendModal()
    },
    hiddenGiftSendModal() {
      this.sendModel = {
        active: -1,
        position: {
          top: '-1000px',
          left: '-1000px'
        }
      }
    }
  },
  created() {
  },
  watch: {}
}
</script>

<style scoped lang="scss">
@import "home.scss";
</style>
